<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Radio with Text</title>
  <style>
    /* 隐藏默认的 radio 按钮 */
    .custom-radio input[type="radio"] {
      display: none;
    }

    /* 自定义 label 样式 */
    .custom-radio label {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      cursor: pointer;
      font-size: 16px;
      color: #333;
    }

    /* 设置背景图标区域 */
    .custom-radio label::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url('./img/unchecked.svg'); /* 默认背景图 */
    }

    /* 选中状态 */
    .custom-radio input[type="radio"]:checked + label::before {
      background-image: url('./img/select.svg'); /* 选中背景图 */
    }
  </style>
</head>
<body>
  <div class="custom-radio">
    <!-- 第一项 -->
    <input type="radio" id="option1" name="options" value="1">
    <label for="option1">选项一：这是第一个选项</label>
    <!-- 第二项 -->
    <input type="radio" id="option2" name="options" value="2">
    <label for="option2">选项二：这是第二个选项</label>
    <!-- 第三项 -->
    <input type="radio" id="option3" name="options" value="3">
    <label for="option3">选项三：这是第三个选项</label>
  </div>
</body>
</html>
